<template>
  <div class="AbnormalAnalysisbox">
    <div class="topbox">
      <div class="filter">
        <span class="text">用电企业</span>
        <span>
          <el-select size="small" v-model="companyNo" filterable multiple  style="width: 300px;">
            <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
          </el-select>
        </span>
        <span class="text">日期</span>
        <span>
          <el-date-picker
            size="small"
            v-model="value2"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </span>
      </div>
      <div><button @click="chongzhi" class="button">重置</button><button @click="handleClick(activeName)" class="button sure">查询</button></div>
    </div>
    <div class="bodybox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="单位数据异常" name="first">
          <DanWei :companyNo="companyNo" :value2="value2" ref="DanWei"></DanWei>
        </el-tab-pane>
        <el-tab-pane label="告警数据异常" name="second">
          <GaoJing :companyNo="companyNo" :value2="value2" ref="GaoJing"></GaoJing>
        </el-tab-pane>
        <el-tab-pane label="设备数据异常" name="third">
          <SheBei :companyNo="companyNo" :value2="value2" ref="SheBei"></SheBei>
        </el-tab-pane>
        <el-tab-pane label="采集数据" name="fourth">
          <CaiJi :companyNo="companyNo" :value2="value2" ref="CaiJi"></CaiJi>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getuserlistapi } from '@/api/analysis'
import CaiJi from './CaiJi'
import DanWei from './DanWei'
import GaoJing from './GaoJing'
import SheBei from './SheBei'
export default {
  name: 'CallPoliceIndex',
  components: {
    DanWei,
    CaiJi,
    GaoJing,
    SheBei
  },
  data() {
    return {
      activeName:'first',
      companyNo: [],
      qiyelist:[],
      value2:[]
    };
  },

  async mounted() {
    this.gettime()
    const res = await getuserlistapi()
    this.qiyelist = res.data.list
    this.companyNo.push(res.data.list[0].bizOrgNo)
    this.handleClick(this.activeName)
  },

  methods: {
    // 单选切换
    handleClick(val) {
      if (this.activeName== 'first') {
        this.$refs.DanWei.getdatalist()
      } else if (this.activeName== 'second') {
        this.$refs.GaoJing.getdatalist()
      }else if (this.activeName== 'third') {
        this.$refs.SheBei.getdatalist()
      }else if (this.activeName== 'fourth') {
        this.$refs.CaiJi.getdatalist()
      }
    },
    // 重置
    chongzhi() {
      this.companyNo = [this.qiyelist[0].bizOrgNo]
      this.gettime()
      this.activeName='first'
      this.handleClick(this.activeName)
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value2 = []
      this.value2.push(year + '-' + month + '-' + '01')
      this.value2.push(year + '-' + month + '-' + day)
    }
  },
};
</script>

<style scoped>
 .AbnormalAnalysisbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .filter{
      .text{
        font-size: 14px;
        color: #606266;
      }
      span{
        margin-right: 15px;
      }
    }
    .button{
      width: 60px;
      height: 30px;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .sure{
      color: #fff;
      background-color: #1a90fe;
    }
  }
  .bodybox{
    height: calc(100% - 90px);
    padding: 20px;
    background-color: #fff;
  }
 }
 ::v-deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}
::v-deep .el-tabs{
  height: 100%;
}
::v-deep .el-tabs__content{
  height: 93% !important;
}
::v-deep .el-tab-pane{
  height: 100%;
}
</style>